
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>My Resident</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
		<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.min.css" />
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="js/quickforms.js"></script>
		<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
<script type="text/javascript">
      function drawVisualization() {
      	
      	// Define Colors
      	
      var backColor = '#ffffff';
      var axisColor = '#3e3e3e';
      var gridlinesColor = '#ffffff';
      var axisTitleColor = '#333333';
      var color1 = '#000000';
      var color1Muted = '#583534';
      var color2 = '#FFFF00';
      var color2Muted = '#';
      var color3 = '#eda637';
      var color3Muted = '#5d4d30';
      var color4 = '#a7a737';
      var color4Muted = '#';
      var color5 = '#86aa65';
      var color5Muted = '#444e3d';
      var color6 = '#8aabaf';
      var color6Muted = '#';
      var color7 = '#69c8ff';
      var color7Muted = '#';
      var color8 = '#3e3e3e';
      var color8Muted = '#3e3e3e';
      var color9 = '#4bb3d3';
      var color9Muted = '#4bb3d3';
      	
        // Create and populate the data table.
      var data_column = new google.visualization.arrayToDataTable([
    ['Domain', 'Total'],
    ['Newborn',   7],
    ['Children',   4],
    ['Adults',   12],
    ['Elderly',   8]
  ]);
  
    // *********************//
    // *** CREATE CHARTS ***//
    // *********************//
  	new google.visualization.ColumnChart(document.getElementById('columnChart')).
      draw(data_column,
           {height:450,
           	width: '100%',
			title: 'Clinical Domain(Totals) Report',
			vAxis: {maxValue: 100},
            backgroundColor: backColor,
            chartArea:{width:"70%",height:"80%"},
            hAxis: {title: 'Clinical Domain', textStyle: {color: axisTitleColor}},
            vAxis: {title: '# of Visits', gridlines: {count: 5, color: gridlinesColor}, baselineColor:axisColor, textStyle:{color: axisTitleColor}},
            colors: [ color1, color2, color3, color4, color5, color6, color7, color8]}
      );
        
      
       }
      google.setOnLoadCallback(drawVisualization);
      
	   var chartResizeTimer;
       
       window.onresize = function adjustSize() {
              clearTimeout(chartResizeTimer);
              chartResizeTimer = setTimeout(drawVisualization(), 100);
               };
               
       $(document).on('pageshow','[data-role=page]', function(){
  drawVisualization();
});

       
    </script>
  </head>
  <body>
    
		<!-- Start of Page -->
		
		<!-- Page Header -->
		<div data-role="page">

			<div data-role="header" data-position="inline" data-theme="a">
				<h1 id="header">Resident Dashboard - </h1>
                <a href="logout.jsp" rel="external" data-role="button" data-inline="true" data-theme="c" class="ui-btn-right">Logout</a>
			</div>
		<!-- /header -->
		<div data-role="content" data-inset="true">	
	
        <!--<form action="" method="POST"> action will tell the form what code to run when the submit button is pressed. Now it just redirects to the portal -->
            <div data-role="navbar">
				<ul>
					<li><a href="Visits.html" rel="external">Visits</a></li>
					<li><a href="Reports1_total.html" rel="external"  class="ui-btn-active ui-state-persist">Reports</a></li>
					<li><a href="Notes.html" rel="external">Notes</a></li>
                    <li><a href="teams.html" rel="external">Admin</a></li>
				</ul>
			</div><!-- /navbar -->
        <!--</form> -->
		<div data-role="content">
					
		<!-- Page Content -->
		<div class="content-primary" data-theme="d">
		
			<div data-role="collapsible" data-theme="b" data-content-theme="c">
				<h2>Choose a Report...</h2>
				<ul data-role="listview">
					<li><a href="Reports.html" rel="external">Age/Gender Report</a></li>
					<li><a href="Reports1.html" rel="external">Clinical Domain Report</a></li>
					<li><a href="Reports2.html" rel="external">Adult Domains Report</a></li>
					<li><a href="Reports2.html" rel="external">Children Domains Report</a></li>
					<li><a href="Reports1.html" rel="external">Procedure Report</a></li>
					<li><a href="table.html" rel="external">Adult Domains Table</a></li>
				</ul>
			</div>
			<label for="time" class="select">Choose a Time Frame:</label>
			<select name="time" id="time" data-theme="b" data-native-menu="false">
				<option value="Not"> -- Not Selected -- </option>
			   <option value="everything" selected="true">Everything</option>
			   <option value="Block 1">Block 1</option>
			   <option value="Block 2">Block 2</option>
			   <option value="Block 3">Block 3</option>
			   <option value="weekly">Current week</option>
			</select>
			<br>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="Reports1.html" rel="external" data-role="button">Male/Female Report</a>
				<a href="Reports1_total.html" rel="external" data-role="button" class="ui-btn-active ui-state-persist">Total Report</a>
			</div>
			
			<div id="columnChart" class="action"></div>
			

		</div>
		
        </div>
        </div>
		<!-- /content -->
		
		<!-- Page Footer -->
		<div data-role="footer">
	   		<h4></h4>
		</div>
		<!-- /footer -->
			
		</div>
		
			
		
  </body>
</html>
